<template>
    <div class="about">
        <el-form>
            <el-form-item label="查看行政区域" label-width="200px">
                <el-select v-model="provinceValue" placeholder="请选择省" @change="chooseProvince">
                    <el-option v-for="item in provinceData" :key="item.code" :label="item.name" :value="item.name"></el-option>
                </el-select>
            
                <el-select v-model="cityValue" placeholder="请选择市" @change="chooseCity">
                    <el-option v-for="item in cityData" :key="item.code" :label="item.name" :value="item.name"></el-option>
                </el-select>
           
                <el-select v-model="areaValue" @change="chooseArea" placeholder="请选择区、县">
                    <el-option v-for="item in areaData" :key="item.code" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>

export default {
    data() {
        return {
            provinceValue: '',
            cityValue: '',
            areaValue: '',
            provinceData: [],
            cityData: [],
            areaData: [],
        }
    },
    created() {
      var $this=this;
        this.axios.get('https://static.panpay.com/static/nuxt/json/ChinaCity.json').then(res => {
            this.provinceData = res.data;
        }).catch(e => {
            this.$message.error("网络连接超时");
        })
    },
    methods: {
        chooseProvince(value) {
            this.cityValue = '';
            this.areaValue = '';
            this.cityData = [];
            this.areaData = [];
            this.provinceData.map(e => { //遍历数据
                if (value == e.name) {
                    this.cityData = e.cityList;
                    return;
                }
            })
        },
        chooseCity(value) {
            this.areaValue = '';
            this.cityData.map(e => { //遍历数据
                if (value == e.name) {
                    this.areaData = e.areaList;
                    return;
                }
            })
        },
        chooseArea() {}
    }
}
</script>

<style lang="stylus">
	.about
		margin 50px auto
		box-sizing border-box
	.el-form
		width 900px
		margin 0 auto
	.el-form-item__label
		text-align right
	.el-form-item__content
		text-align left
	.el-select
		width 200px
		margin-right 20px
</style>
